// 车辆信息明细
<template>

<div class="car-info-detailed">

    <c-block-header :title='"车型明细"'></c-block-header>
    
    <div class="content">
        <c-common-form :labelWith='labelWith' :data='dataCache' :mods='mods'></c-common-form>
    </div>
   
    
</div>

</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
import parckComponent from '@/components/ivew_components/parck_components/index'

@Component({})
export default class carInfoBase extends Vue{
    name:string = 'car-info-detailed'

    @Prop()
    data

    @Watch('data')
    onDataChange(newVal, oldVal){
        this.dataCache = newVal;
    }

    labelWith:number = 60
    
    dataCache = this.data;
    

    mods = [

        {
            label: '车型名称',
            span: 12,
            component: 'input',
            conf:{

            },
            key: 'vin'
        },
         {
            label: '系列名称',
            span: 12,
            component: 'input',
            conf:{

            },
            key: 'vehicleName'
        },
        {
            label: '车型ID',
            span: 8,
            component: 'input',
            conf:{
                number: true                                                     
            },
            key: 'vehicleId'
        },
        {
            label: '车辆品牌',
            span: 8,
            component: 'input',
            conf:{

            },
            key: 'brand'
        },
       
        {
            label: '车身价',
            span: 8,
            component: 'input',
            conf:{
                number: true                                                     
            },
            key: 'price'
        },
        
        {
            label: '上市年份',
            span: 8,
            component: 'input',
            conf:{},
            key: 'releaseYear'
        },
        {
            label: '能源类型',
            span: 8,
            component: 'input',
            conf: {},
            key: 'energyType'
        },
        {
            label: '整备',
            span: 8,
            component: 'input',
            conf:{
                number:true,
            },
            key: 'weight'
        },
        {
            label: '排量',
            span: 8,
            component: 'input',
            conf:{
                number:true,
            },
            key: 'engineCapability'
        },
        {
            label: '载重',
            span: 8,
            component: 'input',
            conf:{
                number:true,
            },
            key: 'tonnages'
        },
         {
            label: '座位',
            span: 8,
            component: 'input',
            conf:{
                number:true,
            },
            key: 'seats'
        },

        
    ]
    
    // 提交表单数据获取方法
    created(){
        this.$emit('dataForm', () => this.dataCache);
    }
    
}


</script>

<style scoped lang='scss'>

.content{
    padding-left: _rem(8px);
}
</style>